<template>
  <div>
<el-card>
  <el-form>
    <el-row>
      <el-col :span="8">
        <el-form-item label="员工账号：" label-width="120px">
          <el-input v-model="page.employeeNumber" placeholder="请输入员工账号"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="员工姓名："  label-width="120px">
          <el-input v-model="page.name" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="工作模式："  label-width="120px">
          <el-select  v-model="page.workPatternId" placeholder="请选择工作模式">
            <el-option
              v-for="item in optionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="8">
        <el-form-item label="月份" label-width="120px">
          <el-date-picker
            v-model="page.month"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所属机构:" label-width="120px">
          <TreeSelect
            v-model="page.agencyId"
            :normalizer="normalizer"
            :options="treeData"
            placeholder="请选择所属机构"
            :appendToBody="true"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item>
          <el-button type="primary" @click="filter">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</el-card>
    <el-card>
<el-row>
  <el-col :span="24">
    <el-button type="primary" @click="routes" >排班设置</el-button>
    <el-button @click="show">绑定排班</el-button>
  </el-col>
</el-row>
<!--      <el-table :data="tableData" @select="sele" @select-all="sele" @selection-change="handleSelectionChange">-->
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"/>
        <el-table-column label="员工账号" prop="employeeNumber"  width="120"/>
        <el-table-column label="员工姓名" prop="name"  width="120"/>
        <el-table-column label="员工电话" prop="phone"  width="120"/>
        <el-table-column label="员工角色" prop="userType"  width="120">
          <template #default="{row}">
            <el-row v-if="row.userType===1">员工</el-row>
            <el-row v-if="row.userType===2">快递员</el-row>
            <el-row v-else>司机</el-row>
          </template>
        </el-table-column>
        <el-table-column label="当前工作模式" prop="workPatternName"  width="120"/>
<!--                                           1-31天 for循环                                  -->
        <el-table-column
          width="120"
          v-for="item in 31"
          :key="item"
          :label= "`${item}`"
          prop="workSchedules[item]"
        >
        <template #default="{row}">
          <el-row>
<!--            {{row.workSchedules[item]}}-->
          </el-row>
          <el-row v-if="row.workSchedules[item]==true">
            <div class="tab-top">上</div>
          </el-row>
          <el-row v-else>
            <div class="tab-but">休</div>
          </el-row>
        </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
<!--    dialog弹窗-->
    <el-dialog
      title="人工调整"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form>
        <el-form-item>
          <el-radio v-model="radio" label="1" @input="change">礼拜制</el-radio>
          <el-radio v-model="radio" label="2" @input="change">连续制</el-radio>
        </el-form-item>
        <el-form-item label="模式名称："  label-width="120px">
          <el-select  v-model="page.workPatternId" placeholder="请选择">
            <el-option
              v-for="item in opList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center">
        <el-button type="primary" @click="think">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import TreeSelect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { GetListApi } from '@/api/instiution'
import { workArrangeList, workModeList } from '@/api/workArrange'
import router from '@/router'

export default {
  components: { TreeSelect },
  name: 'workArrangeManage',
  data () {
    return {
      page: {
        page: 1,
        pageSize: 10,
        workPatternId: '',
        name: '',
        employeeNumber: '',
        month: '',
        agencyId: null
      },
      treeData: [],
      tableData: [],
      total: 0,
      optionList: [], // 工作模式列表
      dialogVisible: false,
      radio: '1', // radio单选框绑定
      selecterList1: [], // 礼拜制数组
      selecterList2: [], // 连续制数组
      opList: [], // 工作模式列表
      show12: false
    }
  },
  created () {
    this.gettree()
    this.getList()
    this.getWorkArrangeList()
  },
  methods: {
    router () {
      return router
    },
    // 处理树形
    async gettree () {
      const res = await GetListApi()
      console.log(res)
      this.data = JSON.parse(res.data)
      this.arr1 = this.data
      this.treeData = this.data
      console.log(this.treeData)
    },
    normalizer (node) {
      return {
        value: node.id,
        label: node.name
      }
    },
    // 工作模式列表查询
    async getList () {
      const res = await workModeList()
      console.log(res.data)
      console.log(res.data[0])
      console.log(res.data[1])
      console.log(res.data[2])
      this.optionList = [...res.data[1], ...res.data[2]]
      this.selecterList1 = res.data[1]
      this.selecterList2 = res.data[2]
      this.opList = this.selecterList1
    },
    // 分页查询排班
    async getWorkArrangeList () {
      const res = await workArrangeList(this.page)
      console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    // 监听pagesize改变
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      console.log(this.page.pagesize)
    },
    // 监听pagename改变
    async handleCurrentChange (newNum) {
      this.page.page = newNum
      console.log(this.page.page)
      this.getWorkArrangeList()
    },
    // 查询
    filter () {
      this.getWorkArrangeList({
        page: 1,
        pageSize: 10,
        workPatternId: this.page.workPatternId,
        name: this.page.name,
        employeeNumber: this.page.employeeNumber,
        month: this.page.month,
        agencyId: this.page.agencyId
      })
    },
    // 重置
    reset () {
      this.page = {
        page: 1,
        pageSize: 10,
        workPatternId: '',
        name: '',
        employeeNumber: '',
        month: '',
        agencyId: null
      }
      this.getWorkArrangeList()
    },
    // 排班设置
    routes () {
      this.$router.push({ path: '/transit/workArrange-setting' })
    },
    // 绑定排班
    show () {
      this.dialogVisible = this.show12
    },
    handleClose () {
      this.dialogVisible = false
      this.page.workPatternId = ''
    },
    // 单选框绑定值变化时触发的事件
    change () {
      console.log(this.radio)// label值
      if (this.radio === '1') {
        this.opList = this.selecterList1
      } else {
        this.opList = this.selecterList2
      }
    },
    // 确定
    think () {
      // 没选择不能提交
      if (this.page.workPatternId === '') {
        this.$message({
          message: '请选择工作模式',
          type: 'warning'
        })
      }
      this.$message.error('暂未开发')
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    // sele (selection, row) {
    //   console.log(selection)
    //   console.log(row)
    //   this.show12 = true
    // },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange (selection) {
      console.log(selection)
      if (selection.length === 0) {
        this.show12 = false
      } else {
        this.show12 = true
      }
    }
  }

}

</script>
<style scoped>
.tab-top{
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: #ffeeeb;
  line-height: 21px;
  text-align: center;
  color: #e46942;
}
.tab-but{
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color:#eff3f8;
  line-height: 21px;
  text-align: center;
  color: black;
}
</style>
